<template>
	<view class="nav-bar" :data-key="current">
		<u-tabs bg-color="transparent" :list="tabList" bar-width="40" active-color="#ffaa00" :is-scroll="false" :current="current"
		 bar-height="8" inactive-color="#212c67" :active-item-style='activeItemStyle' @change="change" :offset ="[5,5]"></u-tabs>
	</view>
</template>

<script>
	export default {
		props: {
			tabList: {
				type: Array,
				default:()=>{
					return [{
						name: "全部",
						count: "0"
					},
					{
						name: "紧急"
					}, {
						name: "主要"
					}, {
						name: "次要"
					}, {
						name: "警告"
					}
				]
				} 
			}
		},
		data() {
			return {
				activeItemStyle: {
					"color": "#212c67",
				},
				current: 0,
				navArr: [{
						name: "全部",
						count: "333"
					},
					{
						name: "紧急"
					}, {
						name: "主要"
					}, {
						name: "次要"
					}, {
						name: "警告"
					}
				],
			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.$emit('changeIndex',index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		/* width: 690rpx; */
		/* margin: 0 auto;
		margin-bottom: 20rpx; */
	}
</style>
